<template>
	<view class="wrap">
		<!-- <view v-if="this.sex == 'F'">
			
		</view>
		<view v-if="this.sex == 'F'">
			
		</view> -->
				<view style="margin: 20rpx 0rpx 0rpx 40rpx;" v-if=" sex ==='M' ">请选择头像</view>
				<view class="head-img" style="margin-top: 20rpx;" v-if="sex ==='M'">
					<u-upload @on-success="bbb" @on-uploaded="aaa" @on-remove="removeFile" :action="action"
						:auto-upload="true" max-count="1" :show-progress='imgshow'>
					</u-upload>
				</view>
			
			<view class="input">
				<view class="title">
					昵称
				</view>
				<input   placeholder="请输入昵称" v-model="nickName" type="text" class="inp">
				</input>
			</view>
			<view class="input">
				<view class="title">
					身高
				</view>
				<input   placeholder="请输入身高" v-model="hight" type="text" class="inp">
				</input>
			</view>
			<view class="input">
				<view class="title">
					体重
				</view>
				<input   placeholder="请输入体重" v-model="weight" type="text" class="inp">
				</input>
			</view>
			<view class="input">
				<view class="title">
					联系方式
				</view>
				<input   placeholder="请输入联系方式" v-model="wxId" type="text" class="inp">
				</input>
			</view>
			
			<view class="input">
				<view class="title">
					年龄
				</view>
				<input   placeholder="请输入年龄" v-model="age" type="text" class="inp">
				</input>
			</view>
			<view style="width: 90%; margin: 0 auto;">
				<view style="height: 50rpx; line-height: 50rpx; font-size: 30rpx;">上传相册照片</view>
				<u-upload ref="uUpload" @on-success="bbb1" @on-uploaded="aaa1" @on-remove="removeFile"  :header="headers"
					:action="action" :auto-upload="true" max-count="9"  :show-progress='imgshow'>
				</u-upload>
				
			</view>
		<view class="submit" @click="git">
			<view class="text">
				<text>保存资料</text>
			</view>
		</view>
		
		<!-- <u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="time" v-model="pickerShow" @confirm="timeConfirm"></u-picker>
		<u-toast ref="uToast" />
		<u-picker v-model="show" @confirm="datalist" mode="region"> </u-picker> -->
		<!-- <u-picker mode="selector" v-model="show1" :params="actionSheetList"></u-picker> -->
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	import http from '@/api/http.js'
	export default {
		data() {
			return {
				age:'',
				nickName:'',
				wxId:'',
				hight:'',
				weight:'',
				pic:'',
				sex:'',
				// action:  'http://jiaoyou.zheyousoft.cn/api/app/file/upload/element',
				action:  'https://xiuqiu.xiuqiu.cc/api/app/file/upload/element',
				// action:"http://192.168.8.100:9310/file/upload/element",
				imgshow:true,
				headers:{
					'Authorization':'bearer '+uni.getStorageSync('token'),
				},
				showPics:"",
				possword:"",
				jiu:"",
				xin:"",
				show:false
			};
		},
		onShow() {
			//this.get();
		},
		onLoad() {
			//this.get();
			api.request({
				url: '/p/user/userInfo',
				method: 'GET',
			}).then(set => {
				console.log(set.data)
				this.nickName = set.data.nickName
				if(set.data.weight == null){
					this.weight = ''
				}else{
					this.weight = set.data.weight 
				}
				if(set.data.height == null){
					this.height = ''
				}else{
					this.height = set.data.height
				}
				this.age = set.data.age
				this.wxId = set.data.userMobile
				console.log(set.data.loginPassword)
				this.sex = set.data.sex
				this.possword = set.data
				console.log(this.possword)
			})
			
		},
		methods: {
			//修改密码
			
			bbb1(data, index, lists, name) {
				console.log(121212);
				this.showPics+="http://cdn.jiaoyou.zheyousoft.cn/" + data+','
				console.log(this.showPics);
			},
			//用户删除了那些图片
			removeFile(index, lists, name) {
				console.log("移除了第" + index + "张图片");
				this.fileName.splice(index, 1)
				console.log(this.fileName + "删除后的文件");
			},
			//图片全部上传完成后执行此方法  
			aaa1(e) {
				uni.showToast({
					icon: 'success',
					title: '图片上传成功',
				});
				this.imgshow = false
			
			},
				bbb(data, index, lists, name) {
					this.pic = "http://cdn.jiaoyou.zheyousoft.cn/" + data
					uni.showToast({
						icon: 'success',
						title: '提交头像成功',
					});
					this.imgshow = false
				},
				removeFile() {},
				aaa() {},
			git(){
				if(this.sex == "M"){
					if(this.pic == ''){
						uni.showToast({
						    title: "头像不能为空",
						    icon: "none"
						})
						return
					}
				}else{
				if(this.nickName == ''){
					uni.showToast({
					    title: "昵称不能为空",
					    icon: "none"
					})
					return
				}
				if(this.hight == ''){
					uni.showToast({
					    title: "身高不能为空",
					    icon: "none"
					})
					return
				}
				if(this.weight == ''){
					uni.showToast({
					    title: "体重不能为空",
					    icon: "none"
					})
					return
				}
				if(this.wxId == ''){
					uni.showToast({
					    title: "联系方式不能为空",
					    icon: "none"
					})
					return
				}
				if(this.age == ''){
					uni.showToast({
					    title: "年龄不能为空",
					    icon: "none"
					})
					return
				}
				if(this.showPics == ''){
					uni.showToast({
					    title: "照片墙不能为空",
					    icon: "none"
					})
					return
				}
				}
				let {
					age,
					nickName,
					wxId,
					hight,
					weight,
					pic,
					showPics
				} = this
				api.request({
					url: '/p/user/setUserInfo',
					data:{
					age:age,
					nickName:nickName,
					wxId:wxId,
					hight:hight,
					weight:weight,
					pic:pic,
					showPics:showPics
					},
					method: 'PUT',
				}).then(res=>{
					console.log(res)
					this.pic = res.data.pic
					
					uni.showToast({
					    title: "保存成功",
					    icon: "success"
					})
					setTimeout(() => {
					uni.switchTab({
					   url: "/pages/user/user"
					})
					},500)
				})
				},
			// addtag(){
				
			// },
			// datalist(e) {
			// 	this.model.address = e.province.label + e.city.label + e.area.label;

			// },
			// changeHead() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: (res) => {
			// 			this.model.ava = res.tempFilePaths[0]
			// 			this.fileName = res.tempFilePaths
			// 			//console.log("头像上传"+this.model.ava);
			// 		}
			// 	});
			// },
			//初始化
			// get() {
			// 	const that = this;
			// 	uni.getStorage({
			// 		key: 'userInfo',
			// 		success: function(res) {
			// 			console.log(res)
			// 			that.openid = res.data.userId;
			// 			uni.showLoading({
			// 				title: '获取信息中'
			// 			})
			// 			// that.model.birth = res.data.birth;
			// 			// that.model.wechat = res.data.wechat;
			// 			// that.model.phone = res.data.phone;
			// 			// that.model.qq = res.data.qq;
			// 		},
			// 		complete() {
			// 			that.userinfo();
			// 		}
			// 	});
			// },
			//获取用户信息
			// userinfo() {
			// 	api.request({
			// 		url: '/userInfo/findUserInfoById',
			// 		method: 'GET',
			// 		data: {
			// 			userId: this.openid
			// 		},
			// 	}).then(res => {
			// 		this.model.name = res.data.data.nickName;
			// 		this.model.sex = res.data.data.gender;
			// 		this.model.birth = res.data.data.birth;
			// 		this.model.phone = res.data.data.phone;
			// 		this.model.ava = res.data.data.avatarUrl;
			// 		this.model.wechat = res.data.data.wechat;
			// 		this.model.qq = res.data.data.qq;
			// 		uni.hideLoading();
			// 	})

			// },
			//保存资料
			// submit() {
			// 	console.log("dsadasdsaw文件名" + this.fileName[0]);
			// 	if (this.fileName[0] == undefined) {
			// 		this.submitInfo(this.model.ava)
			// 	} else(
			// 		uni.uploadFile({
			// 			url: http.baseUrl + '/upload/uploadChangdiImg', //仅为示例，非真实的接口地址
			// 			filePath: this.fileName[0],
			// 			name: 'file',
			// 			formData: {
			// 				'user': 'test'
			// 			},
			// 			success: (uploadFileRes) => {
			// 				console.log(uploadFileRes.data);
			// 				if (uploadFileRes.data != '') {
			// 					this.submitInfo(uploadFileRes.data);
			// 				} else {
			// 					this.$refs.uToast.show({
			// 						title: '更换头像失败',
			// 						type: 'error'
			// 					})
			// 				}
			// 			}
			// 		})
			// 	)
			// },
			// submitInfo(avaName) {
				// let that = this;
				// api.request({
				// 	url: '/userInfo/updateUserInfoById',
				// 	method: 'POST',
				// 	data: {
				// 		id: this.openid,
				// 		//avatarUrl: this.model.ava,
				// 		avatarUrl: avaName,
				// 		nickName: this.model.name,
				// 		gender: this.model.sex,
				// 		birth: this.model.birth,
				// 		phone: this.model.phone,
				// 		wechat: this.model.wechat,
				// 		qq: this.model.qq
				// 	},
				// }).then(res => {
				// 	if (res.data.data == 1) {
				// 		this.$refs.uToast.show({
				// 			title: '保存信息成功',
				// 			type: 'success',
				// 			duration: '1000'
				// 		})
				// 		console.log(this.openid)
				// 		uni.setStorage({
				// 			key: 'userInfo',
				// 			data: {
				// 				userId: that.openid,
				// 				username: that.model.name,
				// 				avatarUrl: avaName,
				// 				gender: that.model.sex,
				// 				birth: that.model.birth,
				// 				phone: that.model.phone,
				// 				wechat: that.model.wechat,
				// 				qq: that.model.qq
				// 			}
				// 		});
				// 		uni.setStorage({
				// 			key: 'phone',
				// 			data: that.model.phone,
				// 			success: (res) => {
				// 				//console.log("存放的值"+res.data);
				// 			}
				// 		});
				// 		setTimeout(function() {
				// 			uni.reLaunch({
				// 				url: '../user'
				// 			})
				// 		}, 1000)


				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: '保存信息失败',
				// 			type: 'error'
				// 		})
				// 	}
				// });
			// },
			// 点击actionSheet回调	
			// actionSheetCallback(index) {
			// 	uni.hideKeyboard();
			// 	this.model.sex = this.actionSheetList[index].text;
			// },
			// timeConfirm(e) {
			// 	this.model.birth = e.year + '-' + e.month + '-' + e.day;
			// }
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		//padding: 30rpx;
	}
	.head-img{
		
		width: 200rpx;
		height: 200rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		image{
			border-radius: 100rpx ;
			width: 100%;
			height: 100%;
		}
	}
		
	.zzcc{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
	}
	.zzc{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		background: #5f5f5f99;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	.zzc4{
		width: 90%;
		height: 400rpx;
		position: relative;
		top: -1000rpx;
		left: 35rpx;
		background: #ffffff;
		padding-top: 30rpx;
		z-index: 20;
			
		.zzc1{
			width: 90%;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			padding-left: 10rpx;
			margin-left: 5%;
			border: 1rpx solid red;
		}
		.zzc2{
			width: 90%;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			padding-left: 10rpx;
			margin-left: 5%;
			border: 1rpx solid red;
			margin-top: 20rpx;
		}
		.zzc3{
			width: 40%;
			margin-top: 40rpx;
		}
	}
	.input{
		width: 100%;
		padding: 0 50rpx;
		margin: auto;
		line-height:120rpx;
		display: flex;
		border-bottom: 2rpx solid #e7e7e7;
		.title{
			width: 200rpx;
			font-size: 32rpx;
		}
		.inp{
			height: 120rpx;
			padding-left: 30rpx;
		}
		.add{
		}
		.tag{
			margin: 20rpx 5rpx;
			padding: 0 10rpx;
			line-height: 40rpx;
			height: 40rpx;
			border: 2rpx solid #999999;
			border-radius: 10rpx;
		}
	}
	.addtag {
		float: right;
	}

	.receiv-input2 {
		margin-top: 6upx;
		font-size: 26upx;
		line-height: 36upx;
		color: #909399;
		word-wrap: break-word;
		padding-top:20rpx;
		margin-left: 30upx;
		margin-top: 20upx;
	}

	.submit {
		text-align: center;
		background-image: linear-gradient(to bottom right, #81dde1, #88eec9);
		//position: fixed;
		//bottom: 0;
		z-index: 888;
		width: 100%;
		color: white;

		.text {
			padding: 25rpx;
		}
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
